<template>
  <view class="film-item" @click="handleClick">
    <view class="flex items-center flex-1 justify-between">
      <text class="font-30 font-700 text-row-1 flex-1">{{ name }}</text>
      <view v-if="data.autoTime > 0" class="flex items-center shrink-0">
        <zm-icon name="clock-o"></zm-icon>
        <view class="ml-10">
          <u-count-down :time="data.autoTime * 1000" auto-start format="mm:ss" @finish="handleOnFinish"></u-count-down>
        </view>
      </view>
      <text v-else class="ml-10 shrink-0">{{ data.orderStatusName }}</text>
    </view>
    <text class="text-666 mt-10">{{ data.createTime }}</text>
    <text class="font-30 font-700 mt-10 text-price text-price-small-before">{{ data.rechargeMoney | formatDigit }}</text>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import { mapGetters } from "vuex"
import { RECHARGE_ACCOUNT_TYPE } from "@/dict"
export default {
  mixins: [hook, weixin],
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      RECHARGE_ACCOUNT_TYPE,
      parent: null
    }
  },
  computed: {
    ...mapGetters(["cardName"]),
    name() {
      if (RECHARGE_ACCOUNT_TYPE[this.data.type] == "电影卡充值") return `${this.cardName}充值`
      return RECHARGE_ACCOUNT_TYPE[this.data.type]
    }
  },
  methods: {
    handleOnFinish() {
      this.$emit("refresh", this.data)
    },
    handleClick() {
      this.toView({
        url: "pages/order/order-recharge-info/order-recharge-info",
        params: {
          orderId: this.data.orderId,
          orderType: this.data.type
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.film-item {
  display: flex;
  padding: 24rpx;
  margin: 20rpx 24rpx;
  margin-bottom: 0;
  border-radius: 16rpx;
  flex-direction: column;
  background-color: #fff;
}
</style>
